<template>
	<view style="background: #F1F5FF;height: 100%;">
		
		<myHeadTab>活动详情</myHeadTab>
		
		<view style="height: 32rpx;"></view>
		
		<uni-row style="height: 46rpx;">
			<uni-col :span="1" :offset="1">
				<image style="width: 36rpx;height: 36rpx;position: relative;top: 6rpx;" src="../../../../static/名称.png"></image>
			</uni-col>
			
			<uni-col :span="20">
				<text class="f3" style="position: relative;left: 12rpx;">{{activity?.title}}</text>
			</uni-col>
			
			<uni-col :span="1" >
				<image style="height: 32rpx;width: 32rpx;position: relative;top: 6rpx;" src="../../../../static/分享.png"></image>
			</uni-col>
		</uni-row>
		
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 352rpx;padding-top: 24rpx;padding-left: 24rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">招宣年度</text>
					</view>
					<view style="height: 8rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 100%;">
						<text class="f5" >{{activity?.activityAnnual}}</text>
					</view>
					
					<view style="height: 28rpx;width: 100%;"></view>
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动来源</text>
					</view>
					<view style="height: 8rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 100%;">
						<text class="f5" >{{activity?.activityOrigin}}</text>
					</view>
					
					<view style="height: 28rpx;width: 100%;"></view>
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动区域</text>
					</view>
					<view style="height: 8rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 100%;">
						<text class="f5" >{{splitLocation(activity?.area)}}</text>
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		
		<view style="width: 100%;height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 242rpx;padding-top: 24rpx;padding-left: 24rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动牵头宣传组</text>
					</view>
					<view style="height: 8rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 100%;display: flex;">
						<image style="height: 40rpx;width: 40rpx;border-radius: 100%;border: 1px solid black;"></image>
						
						<view style="height: 100%;width: 19.44rpx;"></view>
						
						<text class="f5" >{{activity?.group}}</text>
					</view>
					
					<view style="height: 28rpx;width: 100%;"></view>
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动创建人</text>
					</view>
					<view style="height: 8rpx;width: 100%;"></view>
					
					<view style="height: 40rpx;width: 100%;display: flex;">
						
						<image style="height: 40rpx;width: 40rpx;border-radius: 100%;border: 1px solid black;"></image>
						
						<view style="height: 100%;width: 19.44rpx;"></view>
						
						<text class="f5" >{{activity?.creatorName}}</text>
					</view>
					
					
				</view>
			</uni-col>
		</uni-row>
		
		<view style="width: 100%;height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 244rpx;padding-top: 24rpx;padding-left: 24rpx;" >
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动时间</text>
					</view>
					<view style="height: 4rpx;width: 100%;"></view>
					
					<view style="width: 100%;height: 168rpx;padding-left: 16rpx;">
						
						<view>
							<text class="f6">计划开始日期：{{activity?.beiginDate}}</text>
						</view>
						
						<view>
							<text class="f6">计划结束日期：{{activity?.endDate}}</text>
						</view>
						
						<view>
							<text class="f6">合计时长：{{calculateDuration(activity?.beiginDate,activity?.endDate)}}天</text>
						</view>
		
		
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: auto;padding-top: 24rpx;padding-left: 24rpx;padding-bottom: 32rpx;">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动成员</text>
						<view style="height: 100%;width: 468rpx;"></view>
						<text class="f8" @click="isShow = !isShow" >{{isShow?'收起':'展开'}}</text>
					</view>
					
					
					<view v-if="isShow">
						<view style="height: 8rpx;width: 100%;"></view>
						
						<template v-for="(item,index) in memberList">
						
						<view style="height: 392rpx;width: 100%;padding-left: 16rpx;padding-right: 32rpx;">
						
						<view style="display: flex;" class="f7">
							<view style="width: 450rpx;">{{item.name}}</view> <view style="display: flex;width: 157rpx;justify-content: end;">{{item.jobNumber}}</view>
						</view>
						
						<view class="f7">
							在校单位：{{item.unit}}
						</view>
						
						<view class="f7">
							职务：{{item.job}}
						</view>
						
						<view class="f7">
							职称：{{item.jobName}}
						</view>
						
						<view class="f7">
							籍贯：{{item.origin}}
						</view>
						
						<view class="f7">
							毕业中学：{{item.school}}
						</view>
						
						<view class="f7">
							联系电话：{{item.phone}}
						</view>
					
						</view>
						
						<view v-if="index != memberList.length-1">
							<view style="height: 21rpx;width: 100%;"></view>
						
							<view class="hr"></view>
						
							<view style="height: 25rpx;width: 100%;"></view>
						</view>
						
					
					</template>
					</view>

					
					
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: 304rpx;padding-top: 24rpx;padding-left: 24rpx;" >
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动信息</text>
					</view>
					<view style="height: 4rpx;width: 100%;"></view>
					
					<view style="width: 100%;height: 168rpx;padding-left: 16rpx;">
						
						<view>
							<text class="f6">宣传到访单位名称：{{activity?.unit}}</text>
						</view>
						
						<view>
							<text class="f6">宣传到访时间：{{activity?.activityTime}}</text>
						</view>
						
						<view>
							<text class="f6">宣传到访单位联系人：{{activity?.linkName}}</text>
						</view>
		
						<view>
							<text class="f6">宣传到访单位联系人职务：{{activity?.linkJob}}</text>
						</view>
		
					</view>
					
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: auto;padding-top: 24rpx;padding-left: 24rpx;padding-bottom: 29.42rpx;padding-right: 24rpx">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动总结</text>
						<view style="height: 100%;width: 430rpx;"></view>
						<view style="height: 100%;display: flex;justify-content: center;align-items: center;">
							<image style="height: 24rpx;width: 24rpx;" src="../../../../static/添加.png"></image>
						</view>
						
						<view style="height: 100%;width: 8rpx;"></view>
						<text class="f12">添加</text>
					
					</view>
					<view style="height: 10rpx;width: 100%;"></view>
					
					<view class="f9">
						{{activity?.activitySum.sumTime}}
					</view>
					
					<view class="f10">
						{{activity?.activitySum.sumContent}}
					</view>
					
					<view style="height: 13rpx;width: 100%;"></view>
					
					<view class="hr"></view>
					
					<view style="height: 29rpx;width: 100%;"></view>
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">记录人</text>
						<view style="height: 100%;width:380rpx ;"></view>
						<text class="f11">展示最新的一条</text>
					</view>
					
					<view style="height: 7.45rpx;width: 100%;"></view>
					
					<view style="display: flex;">
						
						<image style="height: 41.14rpx;width: 41.14rpx;border-radius: 100%;border: 1px solid black;"></image>
						
						<view style="height: 100%;width: 19.44rpx;"></view>
						
						<text class="f13">{{activity?.activitySum.name}}</text>
					</view>
					
					
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 24rpx;"></view>
		
		<uni-row>
			<uni-col :span="22" :offset="1">
				<view class="card" style="height: auto;padding-top: 24rpx;padding-left: 24rpx;padding-bottom: 29.42rpx;padding-right: 24rpx">
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">活动总结</text>
						<view style="height: 100%;width: 430rpx;"></view>
						
						<view @click="addVideo" style="display: flex;">
							<view style="height: 100%;display: flex;justify-content: center;align-items: center;">
								<image style="height: 24rpx;width: 24rpx;" src="../../../../static/添加.png"></image>
							</view>
						
						
							<view style="height: 100%;width: 8rpx;"></view>
							<text class="f12">添加</text>
						</view>
						
					
					</view>
					<view style="height: 10rpx;width: 100%;"></view>
					
					<view class="f9">
						{{activity?.activitySum.sumTime}}
					</view>
					
					<view style="height: 14rpx;width: 100%;"></view>
					
					<view class="page" >
						<video @tap="handleHoverStart" class="video" id="demoVideo" :controls="false" :enable-progress-gesture="false" :show-center-play-btn="false" :src="activity?.activityVideo.file"  >
						</video>
						
						<image v-if="!isPlay" @click="videoPlay()" style="height: 40rpx;width: 40rpx;position: relative;z-index: 2;left: -150rpx;top: -60rpx;" src="../../../../static/播放.png"></image>
						
						<view v-if="!isPlay || isHover" class="mb" style="position: absolute;top: 150rpx;z-index: 1;"></view>
						
						<image v-if="isHover" @click="videoPause()" style="height: 40rpx;width: 40rpx;position: relative;z-index: 2;top: -60rpx;left: -150rpx;" src="../../../../static/暂停.png"></image>
						
					</view>
				
					
					<view style="height: 13rpx;width: 100%;"></view>
					
					<view class="hr"></view>
					
					<view style="height: 29rpx;width: 100%;"></view>
					
					<view style="display: flex;height: 40rpx;">
						<view style="position: relative; top: 16rpx; width: 8rpx;height: 8rpx;background: #C5C5C5;border-radius: 100%;"></view>
						<text class="f4" style="position: relative;left: 8rpx;">记录人</text>
						<view style="height: 100%;width:380rpx ;"></view>
						<text class="f11">展示最新的一条</text>
					</view>
					
					<view style="height: 7.45rpx;width: 100%;"></view>
					
					<view style="display: flex;">
						
						<image style="height: 41.14rpx;width: 41.14rpx;border-radius: 100%;border: 1px solid black;"></image>
						
						<view style="height: 100%;width: 19.44rpx;"></view>
						
						<text class="f13">{{activity?.activitySum.name}}</text>
					</view>
					
					
				</view>
			</uni-col>
		</uni-row>
		
		<view style="height: 24rpx;"></view>
		
		<view class="f14">
			PC端能够查看更多详细内容，并提供数据下载
		</view>
		
		<view style="height: 30rpx;"></view>
	</view>
</template>

<script setup>
import myHeadTab from '../../../../component/myHeadTab/index.vue'
import { onMounted,ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

	const demoVideo = ref(uni.createVideoContext('demoVideo'));

	const activityId = ref();
	onLoad((options) => {
		console.log('接受值:',options);
		activityId.value = options;
	})
	
	const isShow = ref(false)
	
	const activity = ref()
	
	onMounted(()=>{
		uni.request({
			url: "/data/activities.json",
			data: {activityId: activityId.value},
			method:'POST',
			success(res){
				activity.value = res.data.at(2)
				console.log(activity.value)
				memberList.value = activity.value.memberList
			}
		})
	})
	
	const memberList = ref()
	
	
	
	const splitLocation = (location) => {
	   if (location) {  
	     // 使用正则表达式和 ng-replace 分割  
	     return location.replace(/(.{2,3}省|.{2,3}市|.{2,3}区)/g, '$1/').slice(0, -1);  
	   } else {  
	     return '';  
	     alert('请输入有效的省市区');  
	   }  
	 }; 
	
	function calculateDuration(startDate,endDate){
	  if (startDate && endDate) {  
	    const start = new Date(startDate);  
	    const end = new Date(endDate);  
	    const diffTime = Math.abs(end - start);  
	    return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) + 1; // 转换为天数  
	  } else {  
	    return null;  
	    alert('请输入有效的日期');  
	  }  
	}
	
	const isPlay = ref(false);
	
	const isHover = ref(false)
	
	function videoPlay(){
		demoVideo.value.play();
		
		isPlay.value = true;
	}
	
	function videoPause(){
		demoVideo.value.pause();
		isPlay.value = false;
		isHover.value = false;
	}
	
	function handleHoverStart(){
		isHover.value = true;
		setTimeout(()=>{
		isHover.value = false;
		},2000)		
	}
	
	function addVideo(){
		uni.navigateTo({
			url: `/pages/activities/mine/component/addVideo?activityId=${activity.value.activityId}`
		})
	}

	
</script>

<style>
.f3{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 32rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 46rpx;
}

.card{
	background: #FFFFFF;
	border-radius: 8px;
}

.f4{
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 24rpx;
color: #5D5C5C;
letter-spacing: 0;
line-height: 40rpx;	
}

.f5{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 40rpx;
}

.f6{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 56rpx;
}
.f7{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 56rpx;
}
.hr{
	width: 626.62rpx;
	height: 2rpx;
	border-top: 2rpx dotted #E6E6E6;
}
.f8
{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #276EFF;
	letter-spacing: 0;
	line-height: 40rpx;
}
.f9{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #94A6C8;
	letter-spacing: 0;
	line-height: 56rpx;
}
.f10{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 56rpx;
}
.f11{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #5D5C5C;
	letter-spacing: 0;
	line-height: 40rpx;
}
.f12{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #276EFF;
	letter-spacing: 0;
	line-height: 40rpx;
}
.f13{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 30rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 44.9rpx;
}
.f14{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #939393;
	letter-spacing: 0;
	text-align: center;
}
.page video{
	height: 160rpx;
	width: 260rpx;
}
.mb{
	height: 160rpx;
	width: 260rpx;
	background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色 */  
}
</style>
